<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <script>
        var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
        document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <style>
        html,
        body,
        .container {
            margin: 0;
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #ffffff;
        }

        #map {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 80px;
        }

        #poi {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 80px;
            background: #FFFFFF;
        }

        .poi-info {
            width: 100%;
            padding: 23px 16px 23px 18px;
            box-sizing: border-box;
            background: #FFFFFF;
            border: 0 solid rgba(0, 0, 0, 0.10);
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
        }

        .poi-name {
            font-size: 17px;
            color: #111111;
            display: block;
            margin-right: 70px;
            word-wrap: break-word;
        }

        .poi-addr {
            font-size: 13px;
            color: #666666;
            display: block;
            margin-top: 4px;
            margin-right: 70px;
            word-wrap: break-word;
        }

        .poi-nav {
            display: block;
            position: absolute;
            top: 10px;
            right: 16px;
            width: 60px;
            height: 60px;
            border-radius: 60px;
            overflow: hidden;
        }

        .poi-nav i,
        .poi-nav span {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 60px;
        }

        .poi-nav i {
            background: url() no-repeat;
            background-size: 100%;
        }
    </style>
</head>

<body>
    <div id="container" class="container">
        <div id="map"></div>
        <div id="poi">
            <div class="poi-info">
                <span class="poi-name"></span>
                <span class="poi-addr"></span>
                <div class="poi-nav">
                    <i></i>
                    <span></span>
                </div>
            </div>
        </div>
    </div>
    <script>
        var loc;
        var serviceWebview;
        var back = function () {
            var webview = plus.webview.currentWebview()
            if (webview.__uniapp_statusbar_style === 'light') {
                plus.navigator.setStatusBarStyle('light')
            }
            webview.close('auto');
        };

        document.addEventListener('plusready', function () {
            serviceWebview = plus.webview.getWebviewById('__W2A_CONTEXT_') || plus.webview.getLaunchWebview();
            plus.key.addEventListener('backbutton', back);


        })
        var ZOOM = 13
        window.__openLocation__ = function (params) {
            var mapElem = document.getElementById('map');
            var poiNameElem = document.querySelector('.poi-name');
            var poiAddrElem = document.querySelector('.poi-addr');
            var poiNavElem = document.querySelector('.poi-nav');
            var latitude = params.latitude;
            var longitude = params.longitude;
            var scale = params.scale;
            var name = params.name;
            var address = params.address;
            var point = new plus.maps.Point(longitude, latitude);
            var map = plus.maps.create('map', {
                center: point,
                zoom: scale || ZOOM,
                top: 0,
                left: 0,
                width: '100%',
                height: mapElem.offsetHeight

            });
            var marker = new plus.maps.Marker(point);
            marker.setIcon('__uniappmarker@3x.png');
            if (name) {
                poiNameElem.innerText = name;
                // marker.setLabel(name);
            }
            if (address) {
                poiAddrElem.innerText = address;
                //                             var bubble = new plus.maps.Bubble(address);
                //                             marker.setBubble(bubble);
            }
            map.addOverlay(marker);
            plus.webview.currentWebview().append(map);
            var userPoint = false
            map.getUserLocation(function (state, point) {
                if (state) {
                    plus.nativeUI.toast('定位失败!');
                } else {
                    userPoint = point;
                }
            })

            var userRoute = false

            poiNavElem.addEventListener('click', function () {
                plus.nativeUI.actionSheet({
                        cancel: "取消",
                        buttons: [{
                                title: userRoute ? '隐藏路线' : '显示路线'
                            },
                            {
                                title: '调用第三方地图导航'
                            }
                        ]
                    },
                    function (e) {
                        switch (e.index) {
                            case 1:
                                if (userRoute) {
                                    map.removeOverlay(userRoute);
                                    userRoute = false;
                                } else {
                                    var search = new plus.maps.Search(map);
                                    search.onRouteSearchComplete = function (state, result) {
                                        plus.nativeUI.closeWaiting();
                                        if (state == 0) {
                                            if (result.routeNumber <= 0) {
                                                plus.nativeUI.toast("没有检索到结果");
                                            }
                                            userRoute = result.getRoute(0);
                                            map.addOverlay(userRoute);
                                        } else {
                                            plus.nativeUI.toast('路线检索失败');
                                        }
                                    }
                                    plus.nativeUI.showWaiting();
                                    search.drivingSearch(userPoint, '', point, '');
                                }
                                break;
                            case 2:
                                // 调用系统地图显示 
                                if (userPoint) {
                                    plus.maps.openSysMap(point, name, userPoint);
                                }
                                break;
                        }
                    });
            });
        }
    </script>
</body>

</html>
